<template>
	<view class="slide">
		<swiper :style="'height:'+heightNumber+'rpx'" :autoplay="autoplay" :interval="interval" :circular="circular"
			:current="current" :previous-margin="type==2?'30rpx':'0rpx'" :next-margin="type==2?'30rpx':'0rpx'"
			@change="handleChange">
			<swiper-item
				:class="{'swiper-item':type==1,'swiper-item-card':type==2,'swiper-item-card-margin':(type==2 && swiperCurrent!=index)}"
				v-for="(item, index) in list" :key="index" @click="click(index)">
				<image :src="item.src" lazy-load :style="'border-radius:'+borderRadius+'rpx;'"
					:class="{'defaut-img':type==1 || (type==2 && swiperCurrent==index),'card-img':type==2 && swiperCurrent!=index,'card-margin':type==2 && swiperCurrent==index}" />
			</swiper-item>
		</swiper>
		<view class="custom-indicator">
			<view v-for="(item,index) in list" :key="index"
				:class="['indicator-item',swiperCurrent==index?'indicator-item-active':'']"></view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	import { ref, watch, defineProps } from 'vue';
	import sheep from '@/sheep';
	
	const props = defineProps({
	  data: {
	    type: Object,
	    default: () => ({}),
	  },
	  styles: {
	    type: Object,
	    default: () => ({}),
	  },
	  //轮播模式(1:默认；2:卡片)
	  type: {
	  	type: Number,
	  	default: 2
	  },
	  //轮播图高度（rpx）
	  heightNumber: {
	  	type: Number,
	  	default: 300
	  },
	  //轮播图圆角（rpx）
	  borderRadius: {
	  	type: Number,
	  	default: 8
	  },
	  //是否自动切换
	  autoplay: {
	  	type: Boolean,
	  	default: true
	  },
	  //自动切换时间间隔
	  interval: {
	  	type: Number,
	  	default: 5000
	  },
	  //是否采用衔接滑动，即播放到末尾后重新回到开头
	  circular: {
	  	type: Boolean,
	  	default: true
	  },
	  //当前所在滑块的index
	  current: {
	  	type: Number,
	  	default: 0
	  }
	});
	
	const list = computed(() =>
	  props.data.list.map((item) => ({
	    ...item,
	    src: sheep.$url.cdn(item.src),
	    poster: sheep.$url.cdn(item.poster),
	  })),
	);
	
	// 使用 ref 来存储 swiperCurrent
	const swiperCurrent = ref(props.current);
	 
	// 监听 props.current 的变化，并更新 swiperCurrent
	watch(() => props.current, (newVal) => {
	  swiperCurrent.value = newVal;
	});
	
	// handleChange 方法
	function handleChange(e) {
	  swiperCurrent.value = e.detail.current;
	  emit('change', e.detail.current);
	}
	 
	// click 方法
	function click(index) {
	  emit('click', index);
	}
</script>

<style scoped>
	.slide {
		width: 100%;
		position: relative;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.swiper-item-card {
		width: 92% !important;
		height: 100%;
		margin: 0 4%;
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		align-items: flex-start;
		justify-content: center;
	}

	.swiper-item-card-margin {
		padding: 4% 0;
	}

	.defaut-img {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.card-img {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.card-margin {
		width: calc(100% - 40rpx);
		margin: 0 20rpx;
		overflow: hidden;
	}

	.custom-indicator {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		margin: 0 auto;
		bottom: 30rpx;
	}

	.indicator-item {
		width: 10rpx;
		height: 10rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 6rpx;
		opacity: 0.6;
	}

	.indicator-item-active {
		background-color: #FFFFFF;
		opacity: 1;
	}
</style>